<template>
  <a-card :bordered="false" class="folder-path ax_plain_card">
    <a-card :bordered="false" :body-style="{ padding: '0' }" class="sticky-top">
      <a-flex class="folder-head system__subtitle" :justify="'space-between'" :align="'center'">
        <div>文件夹列表</div>
        <a-tooltip title="刷新">
          <reload-outlined @click="forceUpdate" />
        </a-tooltip>
      </a-flex>
    </a-card>
    <a-directory-tree
      @select="selectPath"
      :key="updateKey"
      :tree-data="treeData"
      v-model:selected-keys="selectedPaths"
      :load-data="onLoadData"
      v-model:expanded-keys="expandKeys"
    ></a-directory-tree>
  </a-card>
</template>

<script setup lang="ts">
import { getSystemPath } from '@/api/modules/tool/file/file';
import { FileOutlined, FolderOutlined } from '@ant-design/icons-vue';
import type { TreeProps } from 'ant-design-vue';
import type { DataNode, EventDataNode } from 'ant-design-vue/es/tree';
import type { Key } from 'ant-design-vue/es/vc-tree-select/interface';
import { isWindows } from '../data/action';
import {
  currentFolder,
  currentPath,
  expandKeys,
  folderLoading,
  selectedFile,
  selectedFolders,
  selectedPaths,
} from '../data/data';

const updateKey = ref(0);

const treeData = ref<DataNode[]>([]);
const emit = defineEmits(['update:modelValue']);

const forceUpdate = () => {
  updateKey.value++;
  getData();
};
const getData = async () => {
  const { data } = await getSystemPath('');

  if (data.data) {
    treeData.value = data.data.map(e => {
      if (e.type === 'folder') {
        e.icon = h(FolderOutlined);
      } else {
        e.icon = h(FileOutlined);
      }
      return e;
    });
  }
};

const onLoadData: TreeProps['loadData'] = (treeNode: EventDataNode) => {
  folderLoading.value = true;
  selectedFolders.value = [];
  return new Promise<void>(async resolve => {
    if (!treeNode.dataRef) return;
    let path = `${treeNode.key}`;

    /* 给linux加上前缀 */
    if (!isWindows()) {
      path = `/${treeNode.key}/`;
    }
    const { data } = await getSystemPath(path);
    if (data.data) {
      currentFolder.value = data.data;
      treeNode.dataRef.children = data.data?.filter(e => {
        if (e.type === 'folder') return e;
      });
      treeData.value = [...treeData.value];
      folderLoading.value = false;

      resolve();
    }
  });
};

const selectPath = async (selectedKeys: Key[], info: any) => {
  const path = selectedKeys[0];
  selectedFile.value = undefined;
  selectedFolders.value = [];
  if (path) {
    currentPath.value = `${path}`;
    if (info?.node?.children && info?.node?.children.length === 0) {
      onLoadData(info.node);
    } else {
      currentFolder.value = info.node.children;
    }
  }
};

onMounted(() => {
  getData();
});
</script>

<style lang="scss" scoped>
.folder-path {
  height: calc(100%);
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--border-color);
}
:deep(.ant-tree-treenode) {
  white-space: nowrap;
}
.folder-head {
  height: 32px;
  line-height: 32px;
  padding: 0 8px;
  border-bottom: 1px solid var(--border-color);
}
.sticky-top {
  position: sticky;
  z-index: 100;
  box-shadow: none;
  top: 0;
}
</style>
